<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="jquery,pdfjs-dist-pdf,pdfjs-dist-worker,file-saver" />
    <title>159-pdf解析展示</title>
    <style type="text/css">
      button {
        width: 120px;
        height: 30px;
        background: none;
        border: 1px solid #b1afaf;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 1000;
        color: #384240;
        cursor: pointer;
        outline: none;
        margin: 0 0.5%;
      }

      button:hover {
        background: #ccc;
      }

      #container {
        /* A4 210x297 */
        width: 375px;
        height: 530px;
        margin-top: 1%;
        border-radius: 2px;
        border: 2px solid #a29b9b;
      }

      .pdfInfos {
        margin: 0 2%;
      }
      #imgloading {
        position: absolute;
        top: 220px;
        left: 150px;
        display: none;
      }
    </style>
  </head>

  <body>
    <p>
      <a href="https://www.jianshu.com/p/07943cbf2ecf" target="_blank"> JS逐页转pdf文件为图片格式 </a>
    </p>
    <div style="margin-top: 1%">
      <button id="prevpage">上一页</button>
      <button id="nextpage">下一页</button>
      <button id="exportImg">导出图片</button>
      <button onclick="choosePdf()">选择一个pdf文件</button>
      <input style="display: none" id="chooseFile" type="file" accept="application/pdf" />
    </div>

    <div style="margin-top: 1%">
      <span class="pdfInfos">页码：<span id="currentPages"></span><span id="totalPages"></span></span>
      <span class="pdfInfos">文件名：<span id="fileName"></span></span>
      <span class="pdfInfos">文件大小：<span id="fileSize"></span></span>
    </div>

    <div style="position: relative">
      <div id="container"></div>
      <img id="imgloading" src="/assets/loading.gif" />
    </div>

    <script type="module" src="./159-main.js"></script>
  </body>
</html>
